<template>
  <main>
    <manage-table
      :tableName="tableName"
      :tableHeader="tableHeader"
      :dataList="tagList"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @edit="edit"
      @remove="remove"
    >
    </manage-table>
    <div class="table-page">
      <Page 
        :total="totalTag" 
        :current="currentPage" 
        :page-size="pageSize"
        @on-change="changePage" 
        show-elevator 
      />
    </div>
    <Modal v-model="modal" :title="confirmMsg.title" @on-ok="confirm">
      <p>
        {{confirmMsg.pre}}
        <span style="color: #ff9900">{{confirmMsg.name}}</span>
        {{confirmMsg.suf}}
      </p>
    </Modal>
  </main>
</template>

<script>
import {
  findTagList,
  deleteTag
} from 'service'

export default {
  name: 'TagManage',
  data() {
    return {
      modal: false,
      tableName: 'tag-manage',
      tableHeader: [
        {title: ' ', slot: 'number'},
        {title: '名称', key: 'name'},
        {title: '颜色', key: 'color'},
        {title: '样式', slot: 'style'},
        {title: '博客数量', key: 'blogCount'},
        {title: '操作', slot: 'action'}
      ],
      tagId: 0,
      tagList: [],
      totalTag: 0,
      currentPage: 1,
      pageSize: 7,
      confirmMsg: {
        title: '删除标签',
        pre: '您正在准备删除标签 ' ,
        name: '',
        suf: ' 确定吗？'
      },
    }
  },
  created() {
    this.getTagList()
  },
  watch: {
    $route(to, from) {
      if(from.path.indexOf('tag/edit') !== -1 || from.path.indexOf('tag/publish') !== -1) {
        this.getTagList()
      }
    }
  },
  methods: {
    async getTagList() {
      let res = await findTagList(this.currentPage, this.pageSize)
      this.tagList = res.data.data.list
      this.totalTag = res.data.data.total
    },
    edit(id) {
      this.$router.push({
        path: '/profile/tag/edit/' + id
      })
    },
    remove(row) {
      this.tagId = row.id
      this.confirmMsg.name = row.name
      this.modal = true
    },
    async confirm() {
      let res = await deleteTag(this.tagId)
      if (res.data.flag) {
        this.$Message.success({content: '删除标签成功!'})
        this.currentPage = 1
        await this.getTagList()
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
    }
  },
  components: {
    "manage-table": () => import('./unit/ManageTable')
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 1000px;
  .table-page {
    margin-bottom: 2rem;
    text-align: center;
  }
}
</style>